<!DOCTYPE html>
<!-- saved from url=(0049)https://www.jq22.com/demo/jqueryzcdl202110260028/ -->
<html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style id="ace-monokai">
            .ace-monokai .ace_gutter {
                background: #2f3129;
                color: #8f908a;
            }
            .ace-monokai .ace_print-margin {
                width: 1px;
                background: #555651;
            }
            .ace-monokai {
                background-color: #272822;
                color: #f8f8f2;
            }
            .ace-monokai .ace_cursor {
                color: #f8f8f0;
            }
            .ace-monokai .ace_marker-layer .ace_selection {
                background: #49483e;
            }
            .ace-monokai.ace_multiselect .ace_selection.ace_start {
                box-shadow: 0 0 3px 0px #272822;
            }
            .ace-monokai .ace_marker-layer .ace_step {
                background: rgb(102, 82, 0);
            }
            .ace-monokai .ace_marker-layer .ace_bracket {
                margin: -1px 0 0 -1px;
                border: 1px solid #49483e;
            }
            .ace-monokai .ace_marker-layer .ace_active-line {
                background: #202020;
            }
            .ace-monokai .ace_gutter-active-line {
                background-color: #272727;
            }
            .ace-monokai .ace_marker-layer .ace_selected-word {
                border: 1px solid #49483e;
            }
            .ace-monokai .ace_invisible {
                color: #52524d;
            }
            .ace-monokai .ace_entity.ace_name.ace_tag,
            .ace-monokai .ace_keyword,
            .ace-monokai .ace_meta.ace_tag,
            .ace-monokai .ace_storage {
                color: #f92672;
            }
            .ace-monokai .ace_punctuation,
            .ace-monokai .ace_punctuation.ace_tag {
                color: #fff;
            }
            .ace-monokai .ace_constant.ace_character,
            .ace-monokai .ace_constant.ace_language,
            .ace-monokai .ace_constant.ace_numeric,
            .ace-monokai .ace_constant.ace_other {
                color: #ae81ff;
            }
            .ace-monokai .ace_invalid {
                color: #f8f8f0;
                background-color: #f92672;
            }
            .ace-monokai .ace_invalid.ace_deprecated {
                color: #f8f8f0;
                background-color: #ae81ff;
            }
            .ace-monokai .ace_support.ace_constant,
            .ace-monokai .ace_support.ace_function {
                color: #66d9ef;
            }
            .ace-monokai .ace_fold {
                background-color: #a6e22e;
                border-color: #f8f8f2;
            }
            .ace-monokai .ace_storage.ace_type,
            .ace-monokai .ace_support.ace_class,
            .ace-monokai .ace_support.ace_type {
                font-style: italic;
                color: #66d9ef;
            }
            .ace-monokai .ace_entity.ace_name.ace_function,
            .ace-monokai .ace_entity.ace_other,
            .ace-monokai .ace_entity.ace_other.ace_attribute-name,
            .ace-monokai .ace_variable {
                color: #a6e22e;
            }
            .ace-monokai .ace_variable.ace_parameter {
                font-style: italic;
                color: #fd971f;
            }
            .ace-monokai .ace_string {
                color: #e6db74;
            }
            .ace-monokai .ace_comment {
                color: #75715e;
            }
            .ace-monokai .ace_indent-guide {
                background: url()
                    right repeat-y;
            }
            /*# sourceURL=ace/css/ace-monokai */
        </style>
        <style>
            .error_widget_wrapper {
                background: inherit;
                color: inherit;
                border: none;
            }
            .error_widget {
                border-top: solid 2px;
                border-bottom: solid 2px;
                margin: 5px 0;
                padding: 10px 40px;
                white-space: pre-wrap;
            }
            .error_widget.ace_error,
            .error_widget_arrow.ace_error {
                border-color: #ff5a5a;
            }
            .error_widget.ace_warning,
            .error_widget_arrow.ace_warning {
                border-color: #f1d817;
            }
            .error_widget.ace_info,
            .error_widget_arrow.ace_info {
                border-color: #5a5a5a;
            }
            .error_widget.ace_ok,
            .error_widget_arrow.ace_ok {
                border-color: #5aaa5a;
            }
            .error_widget_arrow {
                position: absolute;
                border: solid 5px;
                border-top-color: transparent !important;
                border-right-color: transparent !important;
                border-left-color: transparent !important;
                top: -5px;
            }
        </style>
        <style id="ace-tm">
            .ace-tm .ace_gutter {
                background: #f0f0f0;
                color: #333;
            }
            .ace-tm .ace_print-margin {
                width: 1px;
                background: #e8e8e8;
            }
            .ace-tm .ace_fold {
                background-color: #6b72e6;
            }
            .ace-tm {
                background-color: #ffffff;
                color: black;
            }
            .ace-tm .ace_cursor {
                color: black;
            }
            .ace-tm .ace_invisible {
                color: rgb(191, 191, 191);
            }
            .ace-tm .ace_storage,
            .ace-tm .ace_keyword {
                color: blue;
            }
            .ace-tm .ace_constant {
                color: rgb(197, 6, 11);
            }
            .ace-tm .ace_constant.ace_buildin {
                color: rgb(88, 72, 246);
            }
            .ace-tm .ace_constant.ace_language {
                color: rgb(88, 92, 246);
            }
            .ace-tm .ace_constant.ace_library {
                color: rgb(6, 150, 14);
            }
            .ace-tm .ace_invalid {
                background-color: rgba(255, 0, 0, 0.1);
                color: red;
            }
            .ace-tm .ace_support.ace_function {
                color: rgb(60, 76, 114);
            }
            .ace-tm .ace_support.ace_constant {
                color: rgb(6, 150, 14);
            }
            .ace-tm .ace_support.ace_type,
            .ace-tm .ace_support.ace_class {
                color: rgb(109, 121, 222);
            }
            .ace-tm .ace_keyword.ace_operator {
                color: rgb(104, 118, 135);
            }
            .ace-tm .ace_string {
                color: rgb(3, 106, 7);
            }
            .ace-tm .ace_comment {
                color: rgb(76, 136, 107);
            }
            .ace-tm .ace_comment.ace_doc {
                color: rgb(0, 102, 255);
            }
            .ace-tm .ace_comment.ace_doc.ace_tag {
                color: rgb(128, 159, 191);
            }
            .ace-tm .ace_constant.ace_numeric {
                color: rgb(0, 0, 205);
            }
            .ace-tm .ace_variable {
                color: rgb(49, 132, 149);
            }
            .ace-tm .ace_xml-pe {
                color: rgb(104, 104, 91);
            }
            .ace-tm .ace_entity.ace_name.ace_function {
                color: #0000a2;
            }
            .ace-tm .ace_heading {
                color: rgb(12, 7, 255);
            }
            .ace-tm .ace_list {
                color: rgb(185, 6, 144);
            }
            .ace-tm .ace_meta.ace_tag {
                color: rgb(0, 22, 142);
            }
            .ace-tm .ace_string.ace_regex {
                color: rgb(255, 0, 0);
            }
            .ace-tm .ace_marker-layer .ace_selection {
                background: rgb(181, 213, 255);
            }
            .ace-tm.ace_multiselect .ace_selection.ace_start {
                box-shadow: 0 0 3px 0px white;
            }
            .ace-tm .ace_marker-layer .ace_step {
                background: rgb(252, 255, 0);
            }
            .ace-tm .ace_marker-layer .ace_stack {
                background: rgb(164, 229, 101);
            }
            .ace-tm .ace_marker-layer .ace_bracket {
                margin: -1px 0 0 -1px;
                border: 1px solid rgb(192, 192, 192);
            }
            .ace-tm .ace_marker-layer .ace_active-line {
                background: rgba(0, 0, 0, 0.07);
            }
            .ace-tm .ace_gutter-active-line {
                background-color: #dcdcdc;
            }
            .ace-tm .ace_marker-layer .ace_selected-word {
                background: rgb(250, 250, 255);
                border: 1px solid rgb(200, 200, 250);
            }
            .ace-tm .ace_indent-guide {
                background: url('')
                    right repeat-y;
            }
            /*# sourceURL=ace/css/ace-tm */
        </style>
        <style id="ace_editor.css">
            .ace_br1 {
                border-top-left-radius: 3px;
            }
            .ace_br2 {
                border-top-right-radius: 3px;
            }
            .ace_br3 {
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }
            .ace_br4 {
                border-bottom-right-radius: 3px;
            }
            .ace_br5 {
                border-top-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            .ace_br6 {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            .ace_br7 {
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            .ace_br8 {
                border-bottom-left-radius: 3px;
            }
            .ace_br9 {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_br10 {
                border-top-right-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_br11 {
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_br12 {
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_br13 {
                border-top-left-radius: 3px;
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_br14 {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_br15 {
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .ace_editor {
                position: relative;
                overflow: hidden;
                padding: 0;
                font: 12px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
                    'source-code-pro', monospace;
                direction: ltr;
                text-align: left;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
            .ace_scroller {
                position: absolute;
                overflow: hidden;
                top: 0;
                bottom: 0;
                background-color: inherit;
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                cursor: text;
            }
            .ace_content {
                position: absolute;
                box-sizing: border-box;
                min-width: 100%;
                contain: style size layout;
                font-variant-ligatures: no-common-ligatures;
            }
            .ace_dragging .ace_scroller:before {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                content: '';
                background: rgba(250, 250, 250, 0.01);
                z-index: 1000;
            }
            .ace_dragging.ace_dark .ace_scroller:before {
                background: rgba(0, 0, 0, 0.01);
            }
            .ace_selecting,
            .ace_selecting * {
                cursor: text !important;
            }
            .ace_gutter {
                position: absolute;
                overflow: hidden;
                width: auto;
                top: 0;
                bottom: 0;
                left: 0;
                cursor: default;
                z-index: 4;
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                contain: style size layout;
            }
            .ace_gutter-active-line {
                position: absolute;
                left: 0;
                right: 0;
            }
            .ace_scroller.ace_scroll-left {
                box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;
            }
            .ace_gutter-cell {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                padding-left: 19px;
                padding-right: 6px;
                background-repeat: no-repeat;
            }
            .ace_gutter-cell.ace_error {
                background-image: url('');
                background-repeat: no-repeat;
                background-position: 2px center;
            }
            .ace_gutter-cell.ace_warning {
                background-image: url('');
                background-position: 2px center;
            }
            .ace_gutter-cell.ace_info {
                background-image: url('');
                background-position: 2px center;
            }
            .ace_dark .ace_gutter-cell.ace_info {
                background-image: url('');
            }
            .ace_scrollbar {
                contain: strict;
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 6;
            }
            .ace_scrollbar-inner {
                position: absolute;
                cursor: text;
                left: 0;
                top: 0;
            }
            .ace_scrollbar-v {
                overflow-x: hidden;
                overflow-y: scroll;
                top: 0;
            }
            .ace_scrollbar-h {
                overflow-x: scroll;
                overflow-y: hidden;
                left: 0;
            }
            .ace_print-margin {
                position: absolute;
                height: 100%;
            }
            .ace_text-input {
                position: absolute;
                z-index: 0;
                width: 0.5em;
                height: 1em;
                opacity: 0;
                background: transparent;
                -moz-appearance: none;
                appearance: none;
                border: none;
                resize: none;
                outline: none;
                overflow: hidden;
                font: inherit;
                padding: 0 1px;
                margin: 0 -1px;
                contain: strict;
                -ms-user-select: text;
                -moz-user-select: text;
                -webkit-user-select: text;
                user-select: text;
                white-space: pre !important;
            }
            .ace_text-input.ace_composition {
                background: transparent;
                color: inherit;
                z-index: 1000;
                opacity: 1;
            }
            .ace_composition_placeholder {
                color: transparent;
            }
            .ace_composition_marker {
                border-bottom: 1px solid;
                position: absolute;
                border-radius: 0;
                margin-top: 1px;
            }
            [ace_nocontext='true'] {
                transform: none !important;
                filter: none !important;
                clip-path: none !important;
                mask: none !important;
                contain: none !important;
                perspective: none !important;
                mix-blend-mode: initial !important;
                z-index: auto;
            }
            .ace_layer {
                z-index: 1;
                position: absolute;
                overflow: hidden;
                word-wrap: normal;
                white-space: pre;
                height: 100%;
                width: 100%;
                box-sizing: border-box;
                pointer-events: none;
            }
            .ace_gutter-layer {
                position: relative;
                width: auto;
                text-align: right;
                pointer-events: auto;
                height: 1000000px;
                contain: style size layout;
            }
            .ace_text-layer {
                font: inherit !important;
                position: absolute;
                height: 1000000px;
                width: 1000000px;
                contain: style size layout;
            }
            .ace_text-layer > .ace_line,
            .ace_text-layer > .ace_line_group {
                contain: style size layout;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
            }
            .ace_hidpi .ace_text-layer,
            .ace_hidpi .ace_gutter-layer,
            .ace_hidpi .ace_content,
            .ace_hidpi .ace_gutter {
                contain: strict;
                will-change: transform;
            }
            .ace_hidpi .ace_text-layer > .ace_line,
            .ace_hidpi .ace_text-layer > .ace_line_group {
                contain: strict;
            }
            .ace_cjk {
                display: inline-block;
                text-align: center;
            }
            .ace_cursor-layer {
                z-index: 4;
            }
            .ace_cursor {
                z-index: 4;
                position: absolute;
                box-sizing: border-box;
                border-left: 2px solid;
                transform: translatez(0);
            }
            .ace_multiselect .ace_cursor {
                border-left-width: 1px;
            }
            .ace_slim-cursors .ace_cursor {
                border-left-width: 1px;
            }
            .ace_overwrite-cursors .ace_cursor {
                border-left-width: 0;
                border-bottom: 1px solid;
            }
            .ace_hidden-cursors .ace_cursor {
                opacity: 0.2;
            }
            .ace_hasPlaceholder .ace_hidden-cursors .ace_cursor {
                opacity: 0;
            }
            .ace_smooth-blinking .ace_cursor {
                transition: opacity 0.18s;
            }
            .ace_animate-blinking .ace_cursor {
                animation-duration: 1000ms;
                animation-timing-function: step-end;
                animation-name: blink-ace-animate;
                animation-iteration-count: infinite;
            }
            .ace_animate-blinking.ace_smooth-blinking .ace_cursor {
                animation-duration: 1000ms;
                animation-timing-function: ease-in-out;
                animation-name: blink-ace-animate-smooth;
            }
            @keyframes blink-ace-animate {
                from,
                to {
                    opacity: 1;
                }
                60% {
                    opacity: 0;
                }
            }
            @keyframes blink-ace-animate-smooth {
                from,
                to {
                    opacity: 1;
                }
                45% {
                    opacity: 1;
                }
                60% {
                    opacity: 0;
                }
                85% {
                    opacity: 0;
                }
            }
            .ace_marker-layer .ace_step,
            .ace_marker-layer .ace_stack {
                position: absolute;
                z-index: 3;
            }
            .ace_marker-layer .ace_selection {
                position: absolute;
                z-index: 5;
            }
            .ace_marker-layer .ace_bracket {
                position: absolute;
                z-index: 6;
            }
            .ace_marker-layer .ace_error_bracket {
                position: absolute;
                border-bottom: 1px solid #de5555;
                border-radius: 0;
            }
            .ace_marker-layer .ace_active-line {
                position: absolute;
                z-index: 2;
            }
            .ace_marker-layer .ace_selected-word {
                position: absolute;
                z-index: 4;
                box-sizing: border-box;
            }
            .ace_line .ace_fold {
                box-sizing: border-box;
                display: inline-block;
                height: 11px;
                margin-top: -2px;
                vertical-align: middle;
                background-image: url(''),
                    url('');
                background-repeat: no-repeat, repeat-x;
                background-position: center center, top left;
                color: transparent;
                border: 1px solid black;
                border-radius: 2px;
                cursor: pointer;
                pointer-events: auto;
            }
            .ace_dark .ace_fold {
            }
            .ace_fold:hover {
                background-image: url(''),
                    url('');
            }
            .ace_tooltip {
                background-color: #fff;
                background-image: linear-gradient(
                    to bottom,
                    transparent,
                    rgba(0, 0, 0, 0.1)
                );
                border: 1px solid gray;
                border-radius: 1px;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                color: black;
                max-width: 100%;
                padding: 3px 4px;
                position: fixed;
                z-index: 999999;
                box-sizing: border-box;
                cursor: default;
                white-space: pre;
                word-wrap: break-word;
                line-height: normal;
                font-style: normal;
                font-weight: normal;
                letter-spacing: normal;
                pointer-events: none;
            }
            .ace_folding-enabled > .ace_gutter-cell {
                padding-right: 13px;
            }
            .ace_fold-widget {
                box-sizing: border-box;
                margin: 0 -12px 0 1px;
                display: none;
                width: 11px;
                vertical-align: top;
                background-image: url('');
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 3px;
                border: 1px solid transparent;
                cursor: pointer;
            }
            .ace_folding-enabled .ace_fold-widget {
                display: inline-block;
            }
            .ace_fold-widget.ace_end {
                background-image: url('');
            }
            .ace_fold-widget.ace_closed {
                background-image: url('');
            }
            .ace_fold-widget:hover {
                border: 1px solid rgba(0, 0, 0, 0.3);
                background-color: rgba(255, 255, 255, 0.2);
                box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
            }
            .ace_fold-widget:active {
                border: 1px solid rgba(0, 0, 0, 0.4);
                background-color: rgba(0, 0, 0, 0.05);
                box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
            }
            .ace_dark .ace_fold-widget {
                background-image: url('');
            }
            .ace_dark .ace_fold-widget.ace_end {
                background-image: url('');
            }
            .ace_dark .ace_fold-widget.ace_closed {
                background-image: url('');
            }
            .ace_dark .ace_fold-widget:hover {
                box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
                background-color: rgba(255, 255, 255, 0.1);
            }
            .ace_dark .ace_fold-widget:active {
                box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
            }
            .ace_inline_button {
                border: 1px solid lightgray;
                display: inline-block;
                margin: -1px 8px;
                padding: 0 5px;
                pointer-events: auto;
                cursor: pointer;
            }
            .ace_inline_button:hover {
                border-color: gray;
                background: rgba(200, 200, 200, 0.2);
                display: inline-block;
                pointer-events: auto;
            }
            .ace_fold-widget.ace_invalid {
                background-color: #ffb4b4;
                border-color: #de5555;
            }
            .ace_fade-fold-widgets .ace_fold-widget {
                transition: opacity 0.4s ease 0.05s;
                opacity: 0;
            }
            .ace_fade-fold-widgets:hover .ace_fold-widget {
                transition: opacity 0.05s ease 0.05s;
                opacity: 1;
            }
            .ace_underline {
                text-decoration: underline;
            }
            .ace_bold {
                font-weight: bold;
            }
            .ace_nobold .ace_bold {
                font-weight: normal;
            }
            .ace_italic {
                font-style: italic;
            }
            .ace_error-marker {
                background-color: rgba(255, 0, 0, 0.2);
                position: absolute;
                z-index: 9;
            }
            .ace_highlight-marker {
                background-color: rgba(255, 255, 0, 0.2);
                position: absolute;
                z-index: 8;
            }
            .ace_mobile-menu {
                position: absolute;
                line-height: 1.5;
                border-radius: 4px;
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                background: white;
                box-shadow: 1px 3px 2px grey;
                border: 1px solid #dcdcdc;
                color: black;
            }
            .ace_dark > .ace_mobile-menu {
                background: #333;
                color: #ccc;
                box-shadow: 1px 3px 2px grey;
                border: 1px solid #444;
            }
            .ace_mobile-button {
                padding: 2px;
                cursor: pointer;
                overflow: hidden;
            }
            .ace_mobile-button:hover {
                background-color: #eee;
                opacity: 1;
            }
            .ace_mobile-button:active {
                background-color: #ddd;
            }
            .ace_placeholder {
                font-family: arial;
                transform: scale(0.9);
                transform-origin: left;
                white-space: pre;
                opacity: 0.7;
                margin: 0 10px;
            }
            /*# sourceURL=ace/css/ace_editor.css */
        </style>
        <title>登录注册忘记密码页面</title>
        <link
            rel="stylesheet"
            href="./登录注册忘记密码页面_files/normalize.min.css"
        />
        <link rel="stylesheet" href="./登录注册忘记密码页面_files/style.css" />
    </head>

    <body style="">
        <div id="formContainer" class="dwo">
            <div class="formLeft">
                <img src="./登录注册忘记密码页面_files/avatar.png" />
            </div>
            <div class="formRight">
                <!-- Login form -->
                <form id="login">
                    <header>
                        <h1>欢迎回来</h1>
                        <p>请先登录</p>
                    </header>
                    <section>
                        <label>
                            <p>用户名</p>
                            <input
                                type="text"
                                id="login-username"
                                placeholder=" "
                                value=""
                            />
                            <div class="border"></div>
                        </label>
                        <label>
                            <p>密码</p>
                            <input
                                id="login-pwd"
                                type="password"
                                placeholder=" "
                            />
                            <div class="border"></div>
                        </label>
                        <label>
                            <p>验证码</p>
                            <input
                                id="login-code"
                                type="text"
                                placeholder=" "
                                style="width: 50%; display: inline-block"
                            /><img class="yzm" src="" alt="" />
                            <div class="border"></div>
                        </label>
                        <button id="login-btn" type="submit">登 录</button>
                    </section>
                    <footer>
                        <button type="button" class="registerBtn">
                            新用户？
                        </button>
                    </footer>
                </form>

                <!-- Register form -->
                <form id="register" class="otherForm">
                    <header>
                        <h1>用户注册</h1>
                        <p>注册后享受更多服务</p>
                    </header>
                    <section>
                        <label>
                            <p>用户名</p>
                            <input
                                id="reg_username"
                                type="text"
                                placeholder=" "
                            />
                            <div class="border"></div>
                        </label>

                        <label>
                            <p>密码</p>
                            <input
                                id="reg_pwd"
                                type="password"
                                placeholder=" "
                            />
                            <div class="border"></div>
                        </label>
                        <!-- <label>
                            <p>重复密码</p>
                            <input type="password" placeholder=" " />
                            <div class="border"></div>
                        </label> -->
                        <label>
                            <p>验证码</p>
                            <input
                                id="reg_code"
                                type="text"
                                placeholder=" "
                                style="width: 50%; display: inline-block"
                            /><img class="yzm" src="" alt="" />
                            <div class="border"></div>
                        </label>

                        <button id="register-btn" type="submit">注 册</button>
                    </section>
                    <footer>
                        <button type="button" class="registerBtn">返回</button>
                    </footer>
                </form>
            </div>
        </div>
        <script src="../11.17/jquery-3.6.1.min.js"></script>
        <script src="./登录注册忘记密码页面_files/script.js.下载"></script>
        <script>
            var codeKey = ''
            $(function () {
                getCode()
                checkLogin()
                $('.yzm').click(getCode)
                $('#register-btn').click(registerFun)
                $('#login-btn').click(loginFun)
            })
            function loginFun() {
                event.preventDefault()
                let data = {
                    username: $('#login-username').val(),
                    password: $('#login-pwd').val(),
                    captcha: $('#login-code').val(),
                    key: codeKey,
                }
                $.post(
                    'https://api.zzgoodqc.cn/api/login',
                    data,
                    function (res) {
                        if (res.code == 200) {
                            localStorage.userInfo = JSON.stringify(res.data)
                            localStorage.token = res.data.token
                            alert('登录成功')
                            location.href = 'admin.html'
                        } else {
                            alert(res.msg)
                        }
                    },
                    'json'
                )
            }
            function checkLogin() {
                let data = localStorage.getItem('userInfo')
                if (data == null) {
                    $('#register, #formContainer').toggleClass('toggle')
                } else {
                    let username = JSON.parse(data).username
                    $('#login-username').val(username)
                }
            }
            function registerFun() {
                event.preventDefault()
                let data = {
                    username: $('#reg_username').val(),
                    password: $('#reg_pwd').val(),
                    captcha: $('#reg_code').val(),
                    key: codeKey,
                }
                $.post(
                    'https://api.zzgoodqc.cn/api/user',
                    data,
                    function (res) {
                        if (res.code == 200) {
                            localStorage.userInfo = JSON.stringify(res.data)
                            alert('注册成功')
                            $('#login-username').val(res.data.username)
                            $('#register, #formContainer').toggleClass('toggle')
                        } else {
                            alert(res.msg)
                        }
                    },
                    'json'
                )
            }
            function getCode() {
                $.get(
                    'https://api.zzgoodqc.cn/api/captcha',
                    function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            $('.yzm').attr('src', res.data.img)
                            codeKey = res.data.key
                        }
                    },
                    'json'
                )
            }
        </script>
    </body>
</html>
